<template>
  <view class="tab-container">
    <view class="tab-header">
      <!-- 横向滚动标签 -->
      <scroll-view 
        class="scroll-tabs" 
        scroll-x 
        :style="{ height: tabHeight + 'rpx' }"
        :scroll-left="scrollLeft">
        <view class="tab-item" 
              v-for="(item, index) in list1" 
              :key="item.id || index"
              :class="currentIndex === index?'active':''"
              @click="switchTab(index)">
          {{ item.name }}
          <view class="active-line" v-if="currentIndex === index"></view>
        </view>
      </scroll-view>
      
      <!-- 下拉选择按钮 -->
      <view class="dropdown-btn" @click="toggleDropdown">
        <text>{{ list1[currentIndex]?.name || '请选择' }}</text>
        <u-icon :name="dropdownOpen ? 'arrow-up' : 'arrow-down'" size="24rpx"></u-icon>
      </view>
    </view>
    
    <!-- 下拉菜单 -->
    <view class="dropdown-menu" v-show="dropdownOpen" @click.stop>
      <view class="dropdown-item" 
            v-for="(item, index) in list1" 
            :key="item.id || index"
            :class="currentIndex === index?'active':''"
            @click="switchTab(index, true)">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    },
    defaultValue: {
      type: [Number, String],
      default: 0
    },
    tabHeight: {
      type: Number,
      default: 88
    }
  },
  data() {
    return {
      list1: this.list,
      currentIndex: this.defaultValue,
      dropdownOpen: false,
      scrollLeft: 0,
      tabWidths: [],
      containerWidth: 0,
      isReady: false
    }
  },
  watch: {
    list: {
      handler(newVal) {
        this.list1 = newVal;
        this.$nextTick(this.initLayout);
      },
      deep: true
    },
    defaultValue(newVal) {
      this.currentIndex = newVal;
      this.$nextTick(this.scrollToActiveTab);
    },
    currentIndex() {
      this.$nextTick(this.scrollToActiveTab);
    }
  },
  methods: {
    // 切换标签
    switchTab(index, fromDropdown = false) {
      if (this.currentIndex === index) return;
      
      this.currentIndex = index;
      this.$emit('click', this.list1[index], index);
      
      if (fromDropdown) {
        this.dropdownOpen = false;
      }
    },
    
    // 切换下拉菜单
    toggleDropdown() {
      this.dropdownOpen = !this.dropdownOpen;
    },
    
    // 点击外部关闭下拉菜单
    closeDropdown() {
      this.dropdownOpen = false;
    },
    
    // 初始化布局信息
    initLayout() {
      const query = uni.createSelectorQuery().in(this);
      
      // 获取容器宽度
      query.select('.scroll-tabs').boundingClientRect(rect => {
        if (rect) {
          this.containerWidth = rect.width;
        }
      }).exec();
      
      // 获取所有标签宽度
      query.selectAll('.tab-item').boundingClientRect(rects => {
        if (rects && rects.length) {
          this.tabWidths = rects.map(r => r.width);
          this.isReady = true;
          this.scrollToActiveTab();
        }
      }).exec();
    },
    
    // 滚动到当前激活的标签
    scrollToActiveTab() {
      if (!this.isReady || !this.tabWidths.length) return;
      
      // 计算当前标签的累计宽度
      let sumWidth = 0;
      for (let i = 0; i < this.currentIndex; i++) {
        sumWidth += this.tabWidths[i];
      }
      
      // 当前标签的宽度和中间位置
      const currentTabWidth = this.tabWidths[this.currentIndex] || 0;
      const targetPosition = sumWidth + currentTabWidth / 2 - this.containerWidth / 2;
      
      // 设置滚动位置，确保标签在可视区域中间
      this.scrollLeft = Math.max(0, Math.round(targetPosition));
    }
  },
  mounted() {
    // 初始化布局
    this.$nextTick(this.initLayout);
    
    // 监听页面滚动，关闭下拉菜单
    uni.onPageScroll(() => {
      if (this.dropdownOpen) {
        this.closeDropdown();
      }
    });
  },
  beforeDestroy() {
    uni.offPageScroll();
  }
}
</script>

<style lang="scss" scoped>
.tab-container {
  background: #fff;
  padding-bottom: 10rpx;
  
  .tab-header {
    display: flex;
    align-items: center;
    position: relative;
    
    .scroll-tabs {
      flex: 1;
      white-space: nowrap;
      
      .tab-item {
        display: inline-block;
        padding: 0 30rpx;
        height: 100%;
        line-height: 88rpx;
        font-size: 30rpx;
        color: #333;
        position: relative;
        
        &.active {
          color: #007AFF;
          
          .active-line {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 40rpx;
            height: 6rpx;
            background: #007AFF;
            border-radius: 3rpx;
          }
        }
      }
    }
    
    .dropdown-btn {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      background: #f5f5f5;
      padding: 0 20rpx;
      height: 64rpx;
      border-radius: 32rpx;
      
      text {
        margin-right: 10rpx;
        font-size: 28rpx;
      }
    }
  }
  
  .dropdown-menu {
    position: absolute;
    top: 98rpx;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
    border-radius: 12rpx;
    z-index: 100;
    
    .dropdown-item {
      padding: 0 30rpx;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      color: #333;
      
      &.active {
        color: #007AFF;
        background: #f5f5f5;
      }
      
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>